﻿@using NB.MGJ.Model;
@{
    Layout = null;
    var card = ViewBag.model as CodeManage_GenCode;

}
@*编辑生码批次*@

<style>
    .btn-success input[type="file"] {
        opacity: 0;
    }

    .form-horizontal div {
        white-space: nowrap;
    }
</style>

<form class="form-horizontal" id="form-batch" role="form" onkeydown="if(event.keyCode==13){return false;}">
    <input type="hidden" name="PatchId" value="@card.PatchId" />
    <input type="hidden" name="CardID" value="@card.CardID" />
    <input type="hidden" name="ID" value="@card.ID" />
    <div class="form-group">
        <label class="col-sm-2 text-right">生码企业：</label>
        <div class="col-sm-10">
            <input readonly="readonly" type="text" class="form-control" value="@card.EnterpriseName" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 text-right">
            <span class="red-700">*</span>
            网站查询结果：
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="Query_Result_Content" readonly="readonly" value="@card.Query_Result_Content" placeholder="请输入网站查询结果" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 text-right">
            <span class="red-700">*</span>
            短信查询结果：
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="Query_Message_Content" readonly="readonly" value="@card.Query_Message_Content" placeholder="请输入短信查询结果" />
        </div>
    </div>

    @*<div class="form-group">
            <label class="col-sm-2 text-right">卡片标题：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="Title" value="@card.Title" />
                <select class="form-control">
                        <option value="value">text</option>
                        <option value="value">text</option>
                    </select>
            </div>
        </div>*@
    <div class="form-group">
        <label class="col-sm-2 text-right">标签图片：</label>
        @*<div class="col-sm-2">
                <button id="btn1" style="margin-bottom:10px;" type="button" class="btn btn-success" name="LabelImage">技术防伪</button>
            </div>

            <div class="col-sm-2" style="margin-left:-30px;">
                <button id="btn2" style="margin-bottom:10px;" type="button" class="btn btn-default" name="LabelImage">物理防伪</button>
            </div>

            <br />
            <br />
            <div id="thelist1" class="col-xs-2 col-sm-2 col-md-2 col-lg-2  col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
                <label id="picker1" style="background: url('/Content/webImgs/upLogo/cp_img_tj.png' );background-size:100% 100%;width:60px;height:60px;border-radius:4px;">
                </label>
                <input type="hidden" name="CardType" id="CardType1" value="@card.CardType" />
            </div>

            <div id="thelist2" style="display:none;" class="col-xs-2 col-sm-2 col-md-2 col-lg-2  col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
                <label id="picker2" style="background: url('/Content/webImgs/upLogo/cp_img_tj.png' );background-size:100% 100%;width:60px;height:60px;border-radius:4px;">
                </label>
                <input type="hidden" name="CardType" id="CardType2" value="@card.CardType" />
            </div>*@

        <div id="thelist1" class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <label id="picker1" style="background: url('/Content/webImgs/upLogo/cp_img_tj.png' );background-size:100% 100%;width:60px;height:60px;border-radius:4px;">
            </label>
            <input type="hidden" name="LabelImage" id="LabelImage" value="@card.LabelImage" />
        </div>
    </div>

    @*<div class="form-group">
            <label class="col-sm-2 text-right">
                产品图片：
            </label>
            <div id="thelist3" class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                <label id="picker3" style="background: url('/Content/webImgs/upLogo/cp_img_tj.png' );background-size:100% 100%;width:60px;height:60px;border-radius:4px;">
                </label>
                <input type="hidden" name="ProductImgUrl" id="ProductImgUrl" value="@card.ProductImgUrl" />
            </div>
        </div>*@

    <div class="row">
        <div class="col-sm-6 form-group">
            <label class="col-sm-4 text-right">
                企业名称：
            </label>
            <div class="col-sm-8">
                <input readonly="readonly" class="form-control" type="text" name="EnterpriseUse" value="@card.EnterpriseUse" />
            </div>
        </div>
        @*<div class="col-sm-6">
                    <label class="col-sm-4 text-right">
                        应用品牌名称：
                    </label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="ProdoctBrand" value="@card.ProdoctBrand" />
                    </div>
                </div>
            </div>*@
        <div class="form-group col-sm-6">
            <label class="col-sm-4 text-right">
                产品名称：
            </label>
            <div class="col-sm-8">
                <input readonly="readonly" class="form-control" type="text" name="ProductName" value="@card.ProductName" />
            </div>
        </div>
    </div>
</form>
<script>
    


    var isUpload = 0;
    //表单转JSON字符串  var data = JSON.stringify($("form").serializeObject()) ;
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    if ($('#LabelImage').val() != '') {
        $('#LabelImage').prev().css({'background': 'url(' + $('#LabelImage').val() + ')','background-size': '100% 100%'});
    }

    if ($('#ProductImgUrl').val() != '') {
        $('#ProductImgUrl').prev().css({ 'background': 'url(' + $('#ProductImgUrl').val() + ')', 'background-size': '100% 100%' });
    }



    
    //upImg('#picker1', '#thelist1', '#LabelImage');
    //upImg('#picker3', '#thelist3', '#ProductImgUrl');
    function upImg(selector, imgCon, input) {
        var uploader = WebUploader.create({
            // 文件接收服务端。
            //server: '/CodeManage/BatchEditSave',
            server: 'Upload/Upload',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: selector,
                multiple: false
            },
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                            '<div id="' + file.id + '" class="img-thumbnail">' +
                            '<img alt="null" />' +
                            //'<p class="info">' + file.name + '</p>' +
                            '</div>'
                    ),

            $img = $li.find('img');
            // $list为容器jQuery实例
            $(imgCon).prepend($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);

            }, 60, 60);
            $(imgCon).find('#' + file.id).mouseenter(function () {
                var url = $(this).find('img').attr('src');
                $(this).attr('name', url).find('img').css({ 'width': '60px', 'height': '60px' }).attr('src', '/Content/webImgs/upLogo/cp_img_sc.png');
            }).mouseleave(function () {
                var url = $(this).attr('name');
                $(this).find('img').attr('src', url);
            }).click(function () {
                $(this).remove();
                $(selector).css('display', 'inline-block');
            });

            uploader.upload();
            $(selector).css('display', 'none');

        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }
            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, result) {
     

            var url = result._raw.split("。")[1]                 
            $(input).val(url);


        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                    $error = $li.find('div.error');
            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error" style="position: relative"></div>').appendTo($li);
            }
            $error.text('上传失败');
            $error.append($('<span class="glyphicon glyphicon-remove" style="position: absolute;right: 0;color: green;font-size: 18px"></span>'))
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });

        
    }


    $('#form-batch').bootstrapValidator({
        fields: {
            Query_Result_Content: {
                validators: {
                    notEmpty: {
                        message: '网站查询结果不能为空'
                    }
                }
            },
            Query_Message_Content: {
                validators: {
                    notEmpty: {
                        message: '短信查询结果不能为空'
                    }
                }
            },
            ProductImgUrl: {
                validators: {
                    notEmpty: {
                        message: '请选择产品图片'
                    },
                }
            },
            //EnterpriseUse: {
            //    validators: {
            //        notEmpty: {
            //            message: '企业名称不能为空'
            //        },

            //    }
            //},
        }
    });
</script>